<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            1.Vue中的数据代理：
                通过vm对象来代理data对象中属性的操作（读/写）
            2.Vue中数据代理的好处
                更加方便操作data中数据
            3.基本原理：
                通过Object.defineProperty()把data对象中的所有属性添加到vm上
                为每一个添加到vm上的属性，都指定一个getter/setter
                在getter/setter内部去操作（读/写）data中对应的属性
         -->
        <div id="root">
            <h1>名字：{{name}}</h1>
            <h1>国家：{{country}}</h1>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示

            /* let data = {
                name:'刘德华',
                country:'中国'
            }
            // vm._data = options.data = data
            // options就是new Vue里面配置项{}的名字
            // vm._data和传入data就是一个人
            const vm = new Vue({
                el:"#root",
                data        //传入的data触发简写模式
            })
            console.log(vm) */


            const vm = new Vue({
                el:"#root",
                data:{
                    name:'刘德华',
                    country:'中国'
                }
            })
            console.log(vm)
        </script>
    </body>
</html>